<template>
  <div>
    <div class="container">
      <!-- <div class="time">
        {{time}}
      </div> -->
      
      <div class="center">
        <h1 style="text-align: center; font-size: 30px; font-weight: bolder;">登录</h1>
        <a-form :model="formState" @finish="handleFinish" @finishFailed="handleFinishFailed">
          <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
            <a-input v-model="formState.username" />
          </a-form-item>
          <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password v-model="formState.password" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" style="width: 300px; height: 30px; margin-left: 130px;" html-type="submit" @click="getlogin">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div></div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        formState: {
          username: '',
          password: ''
        },
       time:''
      };
    },
    methods: {
      handleFinish(values) {
        console.log('Received values of form: ', values);
        this.getlogin();
      },
      handleFinishFailed(errorInfo) {
        console.log('Failed:', errorInfo);
      },
      getlogin() {
  const logindata = {
    username: this.formState.username,
    password: this.formState.password
  };

  this.$http.post('http://localhost:3002/login/login', logindata)
    .then(res => {
      console.log(res.data);
      const code = res.data.code;
      if (code === 400) {
        this.$message.error('账号密码不能为空');
        this.$router.push('/');
      } else if (code === 500) {
        this.$message.error('数据库查询失败');
        this.$router.push('/');
      } else if (code === 401) {
        this.$message.error('用户名或密码错误');
        this.$router.push('/');
      } else if (code === 200) {
        this.$message.success('登录成功');
        localStorage.setItem('isLoggedIn', JSON.stringify(true));
        localStorage.setItem('userRole', res.data.user.role); // 存储用户角色
        const userRole = res.data.user.role;
        if (userRole === '管理员') {
          this.$router.push('/manage');
        } else if (userRole === '超级管理员') {
          this.$router.push('/manage');
        } else {
          this.$router.push('/home');
        }
      }
    })
    .catch(err => {
      console.log(err);
      this.$message.error('登录请求失败');
    });
},
      gettime() {
  const d = new Date();
  const y = d.getFullYear();
  const m = d.getMonth() + 1;
  const r = d.getDate();
  this.time = `今天是${y}年${m}月${r}日`;
}
    },
    mounted(){
      this.gettime();
    }
  };
  </script>
  
  <style scoped>
  .container {
    width: 100vw;
    height: 100vh;
    background-image: url('https://b0.bdstatic.com/7f0a7420abfd5511a4486ca31d8ed975.jpg@h_1280');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 0;
    
  }
  html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
  .center {
    width: 600px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
  }
  /* .time{
    width: 200px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    color: #ffffff;
    position: absolute;
    left: 10px;
    top: 2px;
  } */
  </style>